<template>
  <div class="statisticsContainer">
    <div class="containerLeft">
      <!-- 第一行 -->
      <el-row class="oneRow">
        <el-col :span="24">
          <div class="title">快递出入件数总览</div>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <!-- 
        快递入库
        快递寄件
        未取件
        待处理问题
     -->
      <el-row class="twoRow">
        <el-col :span="6">
          <SmallStatistics
            title="快递入库数"
            :data="expressIntoRepository"
            backgroundColor="#39af8c"
          ></SmallStatistics>
        </el-col>
        <el-col :span="6">
          <SmallStatistics
            title="快递寄件数"
            :data="postExpress"
            backgroundColor="#3c82f4"
          ></SmallStatistics>
        </el-col>
        <el-col :span="6">
          <SmallStatistics
            title="未取件数"
            :data="noTakeExpress"
            backgroundColor="#895bf2"
          ></SmallStatistics>
        </el-col>
        <el-col :span="6">
          <SmallStatistics
            title="待处理问题"
            :data="question"
            backgroundColor="#fc75c7"
          ></SmallStatistics>
        </el-col>
      </el-row>
      <!-- 第三行折线图表 -->
      <el-row class="threeRow">
        <div class="title">快递周入库量</div>
        <el-col :span="24">
          <el-card>
            <div id="Chart" :style="{ height: '400px' }"></div>
          </el-card>
          <!-- <LineChart :data="lineChartData" :date="lineChartDate"></LineChart> -->
        </el-col>
      </el-row>
    </div>
    <div class="containerRight">
      <!-- 仓库余量 -->
      <PieChart :percentageValue="percentageValue"></PieChart>
      <!-- 近期公告 -->
      <Notice
        :announceTime="announceTime"
        :announceContent="announceContent"
      ></Notice>
    </div>
  </div>
</template>

<script>
import SmallStatistics from "../myselfComponents/SmallStatistics";
import PieChart from "../myselfComponents/PieChart";
import Notice from "../myselfComponents/Notice";
import axios from "axios";
import { Loading } from "element-ui";
export default {
  name: "dataStatistics",
  components: {
    SmallStatistics: SmallStatistics,
    PieChart: PieChart,
    Notice: Notice,
  },
  data() {
    return {
      // 快递入库数
      expressIntoRepository: -1,
      // 寄件数
      postExpress: -1,
      // 未取件数
      noTakeExpress: -1,
      // 待处理问题
      question: -1,
      // 折线图数据
      // 仓库余量
      percentageValue: "",
      announceTime: [],
      announceContent: [],
    };
  },
  created() {
    this.displayData();
  },
  methods: {
    // 创建图标
    createLineChart() {
      // 初始化echarts实例
      var chartDom = document.getElementById("Chart");
      var myChart = echarts.init(chartDom);
      //   指定图标的配置项和数据
      this.lineChartObj && myChart.setOption(this.lineChartObj);
    },
    // 页面展示请求数据展示可视化界面
    async displayData() {
      // 设置加载
      const loading = this.$loading({
        lock: true,
        text: '可视化数据加载中，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.02)',
        target: document.querySelector('.el-container .is-vertical')
      })
      var lineChartData = [];
      // 折线图时间
      var lineChartDate = [];
      const { data: res } = await axios({
        method: "GET",
        url: "/api/depository/dataStatistics",
      });
      if (res.code == 200) {
        // 设置数据模型
        this.expressIntoRepository = res.data.dayWarehouseCount;
        this.postExpress = res.data.daySendNumber;
        this.noTakeExpress = res.data.noSignNumber;
        this.question = res.data.noHandleQuestion;
        this.percentageValue = res.data.percentageForLocation;
        for (let i = 0; i < 3; i++) {
          this.$set(
            this.announceTime,
            i,
            res.data.announcementTop3[i].announceTime
          );
          this.$set(
            this.announceContent,
            i,
            res.data.announcementTop3[i].announceContent
          );
        }
        for (let i = 0; i < 7; i++) {
          lineChartData.push(res.data.listForWeek[i].number);
          lineChartDate.push(res.data.listForWeek[i].date);
          // this.$set(lineChartData,i,res.data.listForWeek[i].number);
          // this.$set(lineChartDate,i,res.data.listForWeek[i].date);
        }
        var echarts = require("echarts");
        var myChart = echarts.init(document.getElementById("Chart"));
        // 折线图配置对象
        var option = {
          xAxis: {
            type: "category",
            // 日期 ['xx','xx','xx','xx','xx','xx','xx']
            data: lineChartDate,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              // 数据 [111,222,333,444,555,666,777]
              data: lineChartData,
              type: "line",
              smooth: true,
              // 隐藏折点
              showSymbol: false,
              lineStyle: {
                width: 5,
                color: "#ff84b4",
              },
              itemStyle: {
                color: "#ff84b4",
              },
            },
          ],
        };
        myChart.setOption(option);
      } else {
        this.$message.error("服务器发生错误，请稍后重试");
      }
      loading.close();

    },
  },
};
</script>

<style>
/* 总容器 */
.statisticsContainer {
  display: flex;
  width: 100%;
  height: 100%;
  /* border: 1px solid #000; */
}
.containerLeft {
  padding: 50px;
  padding-right: 20px;
  width: 80%;
}
.containerRight {
  width: 20%;
  padding-top: 20px;
  padding-right: 20px;
  /* border: 1px solid #000; */
}
/* 第一个标题 */
.statisticsContainer .oneRow .title,
.statisticsContainer .threeRow .title {
  font-size: 20px;
  font-weight: 800;
  line-height: 20px;
  text-align: start;
  color: #333;
  margin-bottom: 20px;
}
.statisticsContainer .threeRow .title {
  margin-top: 35px;
}
</style>